<template>
	<view class="container">
		<!-- 我的页面-顶部布局 头像 姓名 手机号 -->
		<view class="top_bg_div">
			<view style="width: 16rpx"></view>
			<image src="/static/assets/top_bg.png" class="top_bg_ing"></image>
			<view style="width: 16rpx"></view>
		</view>

		<view class="userinfo_div">
			<view style="width: 55rpx"></view>
			<!-- 头像布局 -->
			<image src="/static/assets/nav81.png" class="header"></image>
			<!-- 姓名和手机号布局 -->
			<view class="name_mobile_div" @tap="onLogin">
				<!-- 姓名 加 图标的布局 -->
				<view class="name_icon_div">
					<view style="color: #fff; font-size: 32rpx">{{ user.name }}</view>
					<image src="/static/assets/top_u_ic.png" class="name_icon_img"></image>
				</view>
				<view class="mobile_txt">{{ user.phone }}</view>
			</view>
			<view style="width: 16rpx"></view>
		</view>

		<!-- 占位 -->
		<view style="height: 226rpx"></view>

		<view class="item_menu" @tap="onCheckMyRoom">
			<image src="/static/assets/nav09.png" class="ic_menu"></image>
			<view class="txt_menu">我的房间</view>
			<image src="/static/assets/arrow_r.png" class="ic_menu_right"></image>
		</view>

		<view class="divider"></view>

		<view class="item_menu" @tap="onCheckMoneyRecord">
			<image src="/static/assets/nav10.png" class="ic_menu"></image>
			<view class="txt_menu">缴费记录</view>
			<image src="/static/assets/arrow_r.png" class="ic_menu_right"></image>
		</view>

		<view class="divider"></view>

		<view class="item_menu" @tap="onCheckRepair">
			<image src="/static/assets/nav11.png" class="ic_menu"></image>
			<view class="txt_menu">物业报修</view>
			<image src="/static/assets/arrow_r.png" class="ic_menu_right"></image>
		</view>

		<view class="divider"></view>

		<view class="item_menu" @tap="onCheckAbout">
			<image src="/static/assets/nav12.png" class="ic_menu"></image>
			<view class="txt_menu">关于我们</view>
			<image src="/static/assets/arrow_r.png" class="ic_menu_right"></image>
		</view>

		<view class="divider"></view>

		<view class="item_menu" @tap="onCheckPhone">
			<image src="/static/assets/nav13.png" class="ic_menu"></image>
			<view class="txt_menu">联系我们</view>
			<image src="/static/assets/arrow_r.png" class="ic_menu_right"></image>
		</view>

		<view class="divider"></view>

		<!-- 退出按钮 -->
		<view class="btn_exit_div">
			<view class="exit_btn" @tap="onLogout">
				<block v-if="isLogin">退出</block>
				<block v-else>登录</block>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp() // 获取应用实例
	const util = require('../../../utils/util.js')
	import { getCustPhone } from '../../../utils/http/api'
	export default {
		data() {
			return {
				motto: '你好，欢迎使用!',
				userInfo: {},
				hasUserInfo: false,
				canIUse: uni.canIUse('button.open-type.getUserInfo'),
				// 是否已登录
				isLogin: false,
				// 用户信息
				user: { name: '您未登录', phone: '点击此处去登录', id: '' }
			}
		},
		onShow() {
			let token = uni.getStorageSync('token');
			if (util.isNull(token)) {
				// 本地存储的token为空，未登录，直接返回
				this.setData({ isLogin: false })
				let user0 = { name: '您未登录', phone: '点击此处去登录', id: '' }
				this.setData({ isLogin: false, user: user0 })
				return
			}
			this.setData({ isLogin: true })
			app.globalData.gl.token = token // 为全局变量设置token
			let mobile = uni.getStorageSync('mobile')
			let id = uni.getStorageSync('id')
			this.setData({ user: { name: '用户' + mobile, phone: mobile, id: id } })
		},
		methods: {
			//事件处理函数
			bindViewTap() {
				uni.showToast({ title: 'hello' })
			},

			getUserInfo(e) {
				app.globalData.userInfo = e.detail.userInfo;
				this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true })
			},

			// 点击查看我的房间
			onCheckMyRoom() {
				if (util.isNull(app.globalData.gl.token)) {
					util.navigateTo('/pages/sys/login/login')
					uni.showToast({ title: '请先登录', icon: 'none' })
				} else {
					util.navigateTo('/pages/charge/house/my_house/my_house')
				}
			},

			// 点击缴费记录
			onCheckMoneyRecord() {
				if (util.isNull(app.globalData.gl.token)) {
					util.navigateTo('/pages/sys/login/login')
					uni.showToast({ title: '请先登录', icon: 'none' })
				} else {
					util.navigateTo('/pages/charge/c_record/c_record')
				}
			},

			// 点击物业报修
			onCheckRepair() {
				if (util.isNull(app.globalData.gl.token)) {
					util.navigateTo('/pages/sys/login/login')
					uni.showToast({ title: '请先登录', icon: 'none' })
				} else {
					util.navigateTo('/pages/sys/repair/repair')
				}
			},

			// 点击查看电话
			onCheckPhone() {
				// this.reqCustPhone()
				uni.showToast({ title: '18653538531', icon: 'none' })
			},

			// 点击关于
			onCheckAbout() {
				uni.showToast({ title: '欢迎使用物业小程序', icon: 'none' })
			},

			// 点击退出
			onLogout() {
				let that = this
				let user0 = this.user
				if (this.isLogin) {
					// 当前已经登录
					uni.showModal({
						title: '提示',
						content: '是否退出登录？',
						success(res) {
							if (res.confirm) {
								// 点击确定,退出登录
								user0 = { name: '您未登录', phone: '点击此处去登录', id: '' }
								that.setData({ isLogin: false, user: user0 })
								app.globalData.gl.token = '';
								uni.setStorageSync('token', '');
							} else if (res.cancel) {
								// 点击取消，不退出登录
								// wx.showToast({ title: '已取消', icon: 'none', })
							}
						}
					})
				} else {
					// 当前未登录
					that.onLogin()
				}
			},

			// 点击登录
			onLogin() {
				if (!this.isLogin) {
					util.navigateTo('/pages/sys/login/login')
				}
			},

			// 请求物业电话
			async reqCustPhone() {
				uni.showLoading({ title: '处理中', mask: true })
				// let token = util.isLogin()
				let { code, msg, data } = await getCustPhone({});
				uni.hideLoading({});
				if (code == '1') {
					uni.showModal({
						title: '提示',
						content: '是否拨打物业电话：\n' + data,
						success: (res) => {
							if (res.confirm) {
								uni.makePhoneCall({ phoneNumber: data })
							}
						}
					})
				} else {
					uni.showToast({ title: msg, icon: 'none' })
				}
			}
		}
	};
</script>
<style>
	.container {
		display: flex;
		flex-direction: column;
	}

	.userinfo {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.userinfo-avatar {
		width: 128rpx;
		height: 128rpx;
		margin: 20rpx;
		border-radius: 10%;
	}

	.userinfo-nickname {
		color: #aaa;
	}

	.usermotto {
		width: 100%;
		height: 100%;
		margin: 10rpx 0 20rpx 0;
		text-align: center;
	}

	.top {
		width: 100%;
		height: 200rpx;
	}

	.item_menu {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 40rpx;
		line-height: 100rpx;
	}

	.ic_menu {
		width: 44rpx;
		height: 44rpx;
		margin-right: 24rpx;
	}

	.ic_menu_right {
		width: 18rpx;
		height: 24rpx;
		margin-right: 40rpx;
		align-self: right;
	}

	.txt_menu {
		align-self: flex-start;
		font-size: 30rpx;
		flex-grow: 2;
		color: #000;
		width: auto;
		height: 100rpx;
		line-height: 100rpx;
	}

	.exit_btn {
		flex-grow: 1;
		margin-left: 80rpx;
		margin-right: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #25b785;
		font-size: 32rpx;
		text-align: center;
		color: white;
		border-radius: 40rpx;
	}

	/* 20250718修改样式 */
	.top_bg_div {
		width: 100%;
		height: 200rpx;
		display: inline-flex;
		flex-direction: row;
		position: absolute;
	}

	.top_bg_ing {
		flex-grow: 1;
		height: 200rpx;
	}

	.userinfo_div {
		width: 100%;
		height: 200rpx;
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		position: absolute;
	}

	.header {
		width: 100rpx;
		height: 100rpx;
	}

	.name_mobile_div {
		display: flex;
		flex-direction: column;
		margin-left: 44rpx;
	}

	.name_icon_div {
		display: flex;
		align-items: center;
	}

	.name_icon_img {
		width: 30rpx;
		height: 32rpx;
		margin-left: 20rpx;
	}

	.mobile_txt {
		color: #f8e2b9;
		font-size: 28rpx;
		margin: 5rpx 0 0 0;
	}

	.divider {
		background-color: #efefef;
		height: 1rpx;
		margin-left: 0 40rpx 0 40rpx;
	}

	.btn_exit_div {
		display: flex;
		width: 100%;
		margin: 100rpx 0 0 0;
	}
</style>